<template>
    <view class="container">
        <header-bar :config="config" @rightClick="addOrderClick"></header-bar>
        <search-bar
            ref="orderSearch"
            :placeholderText="placeholderText"
            @searchFn="searchFn"
            :actions="actions"
            @actionFn="filterOpen">
        </search-bar>
        <view class="stock-base-box">
            <view class="stock-base-info">
                <view class="b-static">
                    <view class="name"> <image src="/static/img/erp/icon_kcxx.png" class="icon"></image>库存金额 </view>
                    <view class="sum"> ¥{{ stockSummary.Total }} </view>
                </view>
                <view class="b-other">
                    <view class="num">{{ stockSummary.PSku }}</view>
                    <view class="name">单品个数</view>
                    <view class="line"></view>
                    <view class="num">{{ stockSummary.Qty }}</view>
                    <view class="name">库存数量</view>
                </view>
            </view>
        </view>
        <view class="list-header">
            <view class="tabs" style="flex: 1">
                <view
                    class="t-item"
                    :class="{ active: index == tabIndex }"
                    @tap="tabChange(index)"
                    v-for="(item, index) in tabs"
                    :key="index">
                    {{ item.title }}
                </view>
            </view>
            <view class="filter">
                <!-- <view class="f-item">
                    仓库<iconsfont customIcons="icon-xialaxuanze" class="icon" size="18"></iconsfont>
                </view> -->
                <!-- <view class="f-item">
                    排序<iconsfont customIcons="icon-xialaxuanze" class="icon" size="18"></iconsfont>
                </view> -->
            </view>
        </view>
        <view class="main">
            <goods-list v-show="tabIndex == 0" ref="goodsList" :height="listHeight"></goods-list>
            <store-list v-show="tabIndex == 1" ref="storeList" :height="listHeight"></store-list>
        </view>
    </view>
</template>

<script>
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "@/components/common/tab-bar.vue"
import searchBar from "@/components/common/search-bar.vue"
import goodsList from "./goods-list.vue"
import storeList from "./store-list.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { getStockSummary } from "@/service/api/erp.js"
export default {
    components: {
        tabBar,
        searchBar,
        goodsList,
        storeList,
    },
    data() {
        return {
            placeholderText: "输入商品名称或货号",
            config: {
                title: "库存金额",
                back: true,
                centerSlot: true,
                rightSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                    },
                ],
            },
            listHeight: "",
            loadOk: false,
            actions: [],
            tabIndex: 0,
            tabs: [
                {
                    title: "按商品",
                },
                {
                    title: "按仓库",
                },
            ],
            searchForm: {
                fullName: "",
                type: "1",
            },
            stockSummary: {}, // 库存统计
        }
    },
    created() {
        storage.removeCache("storeFullName")
        let mainColor = this.easyGetColor("main")
        this.config.backgroundColor = [1, "#4D4F9B"]
    },
    mounted() {
        this.getListHeight()
    },
    onShow() {
        getStockSummary().then((res) => {
            if (res.State == 1) {
                this.stockSummary = res.Data
            }
        })
    },
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        tabChange(index) {
            this.tabIndex = index
            if (index == 1) {
                // 仓库
                this.searchForm.type = 2
                this.$refs.storeList.refresh(this.searchForm)
            } else {
                this.searchForm.type = 1
                this.$refs.goodsList.refresh(this.searchForm)
            }
        },
        searchFn(key) {
            this.searchForm.fullName = key
            storage.setCache("storeFullName", key)
            if (this.tabIndex == 1) {
                // 仓库
                this.searchForm.type = 2
                this.$refs.storeList.refresh(this.searchForm)
            } else {
                this.searchForm.type = 1
                this.$refs.goodsList.refresh(this.searchForm)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.searchBar {
    background: #4d4f9b;
}
.stock-base-box {
    background: #4d4f9b;
    border-radius: 0px 0px 40rpx 40rpx;
    padding: 0 32rpx 32rpx;
    margin-bottom: 12rpx;
    .stock-base-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 300rpx;
        padding: 0 40rpx;
        border-radius: 40rpx;
        background: #ffffff;
        .b-static {
            .name {
                display: flex;
                font-size: $size-32;
                font-weight: bold;
                align-items: center;
                margin-bottom: 20rpx;
                .icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 8rpx;
                }
            }
            .sum {
                font-size: $size-52;
                font-weight: bold;
            }
        }
        .b-other {
            text-align: right;
            .num {
                font-size: $size-36;
                font-weight: bold;
            }
            .name {
                font-size: $size-28;
                color: $color-gray-3;
            }
            .line {
                height: 26rpx;
            }
        }
    }
}

.list-header {
    display: flex;
    align-items: center;
    height: 100rpx;
    margin: 0 $app-page-padding;
    position: relative;
    z-index: 1;
    .tabs {
        display: flex;
        flex: 1;
        font-size: $size-32;
        .t-item {
            margin: 0 40rpx 0 20rpx;
            position: relative;
            display: flex;
            justify-content: center;
            &.active {
                font-weight: bold;
                &:after {
                    content: "";
                    position: absolute;
                    bottom: -8rpx;
                    width: 32rpx;
                    height: 6rpx;
                    left: 50%;
                    margin-left: -16rpx;
                    background: $app-color-main;
                    border-radius: 4rpx;
                }
            }
        }
    }
    .filter {
        display: flex;
        align-items: center;
        .f-item {
            width: 100rpx;
            height: 42rpx;
            margin-left: 16rpx;
            line-height: 42rpx;
            text-align: center;
            border-radius: 4rpx;
            border: 1px solid #434c67;
            font-size: $size-24;
        }
    }
}
</style>
